import React from 'react'
import {connect} from "react-redux"
import {bindActionCreators} from "redux"
import { Empty } from 'react-vant';
import {useNavigate} from "react-router-dom"
import { Area,Button } from 'react-vant';
import * as action from "../action"
import { Dialog } from 'react-vant';
function Address(props) {
  let navigate = useNavigate()
  
  let goADDRESS = ()=>{
    navigate("/addadress",{
      state:{
        isadd:"新增"
      }
    })
  }
  let delfn = (index)=>{
    Dialog.confirm({
        title: '您确定要删除吗',
       
      })
        .then(() => {  // 把id传给后端，
           props.delFn1(index)
        })
        .catch(() => {
          console.log('catch')
        })
    
  }
  let editfn = (item,index)=>{
    console.log(item,index);
    navigate("/addadress",{
        state:Object.assign({},item,{index:index},{isadd:"编辑"})
    })
  }
  return (
    <div>
        {
           props.addressArr &&    props.addressArr.length ?  props.addressArr.map((item,index)=>{
                return <li key={index}>
                    <p>姓名：{item.name}</p> <p>住址：{item.address}</p> <p>电话：{item.phone}<Button type='primary' onClick={()=>delfn(index)}>删除</Button><Button onClick={()=>editfn(item,index)}>编辑</Button></p>
                </li>
           }):<Empty description="暂无收货地址" />
        }
         <Button type='primary' block round style={{marginTop:"50px"}} onClick={goADDRESS}>
            添加地址
         </Button>
    </div>
  )
}
// 高阶组件加函数科里化
let mapStateToProps = (state)=>{ // 将仓库中的数据提供给组件的props里
     return {
        ...state.shopreducer
     }
      
}
let mapDispatchToprops = (dispatch)=>bindActionCreators(action,dispatch)
    // 将dispatch提供给组件的props里


export default connect(mapStateToProps,mapDispatchToprops)(Address)